
    <!--头部导航-->
    <style type="text/css">
    .sel_box.flex-nowrap{
        margin-bottom:22px;
    }
    .bg_e {
        background: #1E2327;
    }

    .salemain2 {
        margin-top:0;
    }
    .sel_box.flex-nowrap li{
        width : 100%; 
    }
    .salename{
        background:#32363F;
        margin:0;
        position:relative;
        height:37px;
        line-height:37px;
    }
    .salename .font_12{
        position: absolute;
        top:0;
        left:31%;
        border-left:1px solid #1E2327;
        height:37px;
        width:66%;
    }
    .bg_z{
        /*margin-left:15px;*/
    }
    .salename-time.spanHtml{
        width:80px;
        height:20px;
        line-height:20px;
        padding:0;
        margin-left:15px;
    }
    .font_20.co_cd.curArrow{
        border-left:1px solid #1E2327;
        padding: 0px 0;
    }
    .stateHtml{
        font-size:12px;
        color:#969696;
        margin-right:8px;
    }
    .font_20.co_cd.curArrow img{
        width: 8px!important;
        vertical-align: top!important;
        margin-top: 10px!important;
    }
    .sale_ul{
        border:0;
        height:63px;
        padding:9px 15px;
        box-sizing:border-box;
        border-top:1px solid #1E2327;
        border-bottom:1px solid #1E2327;
        background:#292D36;
    }
    .sale_ul li{
        border:0;
        color:#FEFEFF;
    }
    .sale_ul li+li{
        border-left:1px solid #1E2327!important;
    }
    .sale_ul li span {
        color:#EAB300;
    }
    .sale_time{
        height:30px;
        line-height: 30px;
        background: #32363F;
        padding:0 20px;
        color:#5C6576;
    }
    .row.salemain2.orderList+.row.salemain2.orderList{
        margin-top:15px;
    }
    .red.profitLoss i{
        font-size:12px;
    }
    .font_20.co_cd.curArrow+.fr{
        width: 41%;
        text-align: center;
        font-size: 14px;
        color: #FEFEFF;
        position: absolute;
        right: 0;
        top: 59px;
    }
    .font_20.co_cd.curArrow{
        position: absolute;
        right: 0;
        top: 0px;
        font-size: 16px;
        padding-left: 0!important;
        width: 31%;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
    }
    .sale_ul li:nth-child(3){
        border-right:1px solid #1E2327!important;;
    }
    .profitLoss .font_20,.profitLoss .font_16{
        font-size:12px;
    }
    </style>
       <div class="container mar_b100">  
        <div class="row bg_e">
            <?php $form = self::beginForm(['method' => 'get']) ?>
            <ul class="sel_box flex-nowrap">
                <li>
                    <div class="input_box  bank-select po_re">
                      <?= $form->field($model, 'product_id')->dropDownList($productArr, ['class' => 'form-control select', 'prompt' => '所有产品']) ?>
                      <i class="icon glyphicon glyphicon-chevron-down"></i> 
                     </div>
                </li>
                <li>
                    <div class="input_box  bank-select po_re">
                    <?= $form->field($model, 'order_state')->dropDownList(null, ['class' => 'city select', 'prompt' => '所有状态']) ?>
                    <i class="icon glyphicon glyphicon-chevron-down"></i>  
                </div>
                </li>
            </ul>
            <?php self::endForm() ?>
        </div>
        <!-- <p class="font_12 co_f pad_t10 tc">*使用代金券无法进行延时和加仓</p> -->
        <div class="myContent">
            <?= $this->render('_positionList', compact('data')) ?>
        </div>
    </div>

    
    <div class="row pageContent" style="text-align: center; <?php if($pageCount <= 1) : ?>display:none<?php endif ?>">
        <a style="color: red;margin-top: 10px;" type="button" value="加载更多" id="loadMore" data-url="<?= url(['order/positon']) ?>" data-count="<?= $pageCount ?>" data-page="1">加载更多</a>
    </div>
    

    <!-- 模态框（Modal） -->
<!--     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog co_3">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <img src="/images/set.png" height="25" width="25"></button>
                    <h4 class="modal-title text-center" id="myModalLabel">
               设置止盈/亏损
            </h4>
                </div>
                <div class="modal-body">
                    <div class="row">

                    </div>
                    <div class="row mar_t10">
                        <div class="col-xs-3 pad_r0 pad_t10">
                            <span>止盈(%)</span>
                        </div>
                        <div class="col-xs-9 mar">
                            <ul class="modal-dialog-list win">
                                <li>
                                    <p class="dialog-list dialog-list-bg" data-value="0">不设</p>
                                </li>
                                <li>
                                    <p class="dialog-list" data-value="10">10</p>
                                </li>
                                <li>
                                    <p class="dialog-list" data-value="20">20</p>
                                </li>
                                <li>
                                    <p class="dialog-list" data-value="30">30</p>
                                </li>
                                <li>
                                    <p class="dialog-list" data-value="40">40</p>
                                </li>
                                <li>
                                    <p class="dialog-list" data-value="50">50</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row mar_t10">
                        <div class="col-xs-3 pad_r0 pad_t10">
                            <span>止亏(%)</span>
                        </div>
                        <div class="col-xs-9 mar">
                            <ul class="modal-dialog-list2 los" data-value="0">
                                <li>
                                    <p class="dialog-list2 dialog-list-bg" data-value="0">不设</p>
                                </li>
                                <li>
                                    <p class="dialog-list2" data-value="10">10</p>
                                </li>
                                <li>
                                    <p class="dialog-list2" data-value="20">20</p>
                                </li>
                                <li>
                                    <p class="dialog-list2" data-value="30">30</p>
                                </li>
                                <li>
                                    <p class="dialog-list2" data-value="40">40</p>
                                </li>
                                <li>
                                    <p class="dialog-list2" data-value="50">50</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="row text-center pad_t20">
                        <button type="button" class="btn btn-default btn-dialog saveOrderPoint" data-id="" data-dismiss="modal">
                            保存设置
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </div> -->
    <!--底部导航结束-->

    <script>
    $(function() {
        $(".modal-dialog-list li p").click(function() {
            $(".modal-dialog-list li p").removeClass("dialog-list-bg");
            $(this).addClass("dialog-list-bg")

        });

        $(".modal-dialog-list2 li p").click(function() {
            $(".modal-dialog-list2 li p").removeClass("dialog-list-bg");
            $(this).addClass("dialog-list-bg")

        });

        //倒计时
        function time(obj, wait) {
            if (wait <= -1) {
                //全部和持仓中
                if ($(".container .city").find("option:selected").val() == 1) {
                    obj.parent().parent().parent('.orderList').remove();
                } else {
                    obj.html('已到期');
                    obj.addClass('bg_dq');
                    // tes(obj.parent().parent().parent('.orderList').data('id'))
                    obj.next('.stateHtml').html('');
                }
                return false;
            }
            var second = wait % 60,
                minute = (wait-second) / 60,
                html = '';
            if (minute > 9) {
                html = '00:' + minute + ':';
            } else {
                html = '00:0' + minute + ':';
            }
            if (second > 9) {
                obj.html(html + second);
            } else {
                obj.html(html + '0' + second);
            }
            wait--;
            setTimeout(function() {
                time(obj, wait);
            },
            1000);
        }

        //产品/状态的切换
        $('.container').on('change', '.select', function() {
            $("form").ajaxSubmit($.config('ajaxSubmit', {
                success: function (msg) {
                    if (msg.state) {
                        $('.myContent').html(msg.info);
                        var count = msg.data;
                        if (count > 1) {
                            $('.pageContent').show();
                        } else {
                            $('.pageContent').hide();
                        }
                        $('.row>a').attr('data-count', count);
                        $('.row>a').attr('data-page', 1);
                        setTimeout(function() {
                            updateOrderTime();
                        },
                        1000);
                    }
                }
            }));
        });

        //加载页面
        $("#loadMore").click(function() {
            var $this = $(this),
                page = parseInt($this.data('page')) + 1;
            $.get('', {
                p: page
            }, function(msg) {
                $(".myContent").append(msg.info);
                $this.data('page', page);
                if (page >= parseInt($this.data('count'))) {
                    $this.hide();
                }
            });
            return false;
        });
        
        //持仓时间跳动
        function updateOrderTime(){
            //全部和持仓中
            if ($(".container .city").find("option:selected").val() == 2) {
                return false;
            }
            $('.myContent .orderList').each(function(){
                //被系统平仓的订单消失
                var state = $(this).data('state'); 
                if (state == 1) {
                    var wait = $(this).data('time') - 1;
                    time($(this).find('.spanHtml'), wait);
                }
            });

        }
        setTimeout(function() {
            updateOrderTime();
        },
        1000);

        //持仓数据跳动
        function updateOrder(){
            //结算返回
            if ($(".container .city").find("option:selected").val() == 2) {
                return false;
            }
            $.get('/price.json?' + Math.random(), function(newData) {
                $('.myContent .orderList').each(function(){
                    if ($(this).data('state') != 1) {
                        return false;
                    }

                    var lastPrice = $(this).data('price'),
                        name = $(this).data('name'),
                        $this = $(this).find('.profitPrice'),
                        rise = $this.data('rise');
                        price = parseFloat(newData[name]);
                        ltPrice = parseFloat($(this).find('.curPrice').html());
                    //数字实时跳动 
                    if (price > ltPrice) {
                        $(this).find('.curArrow').css('color', 'red');
                        $(this).find('.curArrow img').attr('src', '/images/arrow-top.png');
                    } else if (price < ltPrice) {
                        $(this).find('.curArrow').css('color', 'green');
                        $(this).find('.curArrow img').attr('src', '/images/arrow-down.png');  
                    }
                    $(this).find('.curPrice').html(price);
                    //波动盈亏
                    var obj = $(this).find('.profitLoss'),
                        fee = obj.data('fee'),
                        oprofit = obj.data('oprofit'),
                        deposit = obj.data('deposit');
                    if ((price > lastPrice && rise == 1) || (price < lastPrice && rise == 2)) {
                        var profit = parseFloat(deposit) + parseFloat(deposit * oprofit / 100);
                        obj.find('.font_20').css('color', 'red');
                        obj.find('.font_20').html("赚<i class='font_16' style='margin-left:4px'>"+(profit).toFixed(2)+"</i>");
                    } else if ((price < lastPrice && rise == 1) || (price > lastPrice && rise == 2)) {
                        var money = parseFloat(deposit);
                        obj.find('.font_20').css('color', 'green');
                        obj.find('.font_20').html("亏<i class='font_16' style='margin-left:4px'>"+money+"</i>");
                    } else {
                        obj.find('.font_20').css('color', 'red');
                        obj.find('.font_20').html("平<i class='font_16' style='margin-left:4px'>0</i>");
                    }
                });
            }, 'json');
        }

        setInterval(updateOrder, 1500);
    })
    </script>
    <style type="text/css">
    .modal-dialog-list2 li {
        float: left;
        width: 16%;
    }
    body{color:#fff;background:#191919;}
    .dialog-list2 {
        text-align: center;
        line-height: 40px;
        border: 1px solid #999;
        color: #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
    }
    </style>
    <script type="text/javascript">
    var nowoid = 0;
    $(".setBtn").click(function() {
        nowoid = $(this).data('id');
        var profit = $("#endprofit" + nowoid).val();
        var loss = $("#endloss" + nowoid).val();
        if (profit > 0) {
            $(".dialog-list.dialog-list-bg").removeClass('dialog-list-bg');
        }
        if (loss > 0) {
            $(".dialog-list2.dialog-list-bg").removeClass('dialog-list-bg');
        }
        $('.saveOrderPoint').data('id', $(this).data('id'));
        $(".dialog-list[data-value='" + profit + "']").addClass('dialog-list-bg');
        $(".dialog-list2[data-value='" + loss + "']").addClass('dialog-list-bg');
    })
    </script>